{% extends 'base.html' %}
{% block title %}小涛博客 - 留言墙{% endblock %}
{% block nav_comment_active %}active{% endblock %}

{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}"/>
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="align-center align-middle" id="masthead" style="height: 426px;">
        <div class="blog-background" style="background-image: url('{% static 'images/comment-bg.jpg' %}');"></div>
        <div class="inner"></div>
    </div>
    <div class="orther_body">
        <div class="container">
            <div class="row t_nav">
                <div class="col-md-4">
                    <a href="{% url 'home' %}" class="n1">网站首页</a>
                    <a href="{% url 'comment' %}" class="n2">留言墙</a>
                </div>
                <div class="col-md-8">
                    <span class="pull-right">时光飞逝，机会就在我们眼前，学会把握机遇。</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <!-- content start -->
                    <div class="panel panel-default">
                        <div class="panel-body comment">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <i class="fa fa-coffee"></i>&nbsp;&nbsp;博客统计
                                </div>
                                <div class="panel-body kcbg_body">
                                    <p>网站运行：<strong id="day">0&nbsp;(天)</strong></p>
                                    <p>文章总数：<strong>
                                        {% if blogNumber != 0 %}
                                            {{ blogNumber }}
                                        {% else %}
                                            0
                                        {% endif %}&nbsp;(篇)</strong></p>
                                    <p>总访问次数：<strong>
                                        {% if visitNumber != 0 %}
                                            {{ visitNumber}}
                                        {% else %}
                                            0
                                        {% endif %}
                                        &nbsp;(次)</strong></p>
                                    <p>拦截访问：<strong>0&nbsp;(次)</strong></p>
                                </div>
                            </div>
                            <ul class="infos myblog" id="detail_content">
                                <table class="table table-striped table-hover table-bordered ci_table">
                                    <tbody>
                                    <tr>
                                        <td width="30%">域名：www.tengxt.com</td>
                                        <td width="30%">注册日期：2018年06月15日</td>
                                        <td width="30%">上线日期：2018年12月25日</td>
                                    </tr>
                                    <tr>
                                        <td width="30%">使用技术：
                                            <a style="cursor: pointer;" tabindex="0" role="button" id="staticBtn" data-html="true"
                                               data-toggle="popover" data-placement="top" data-trigger="focus"
                                               data-content="服务端：ECS、Nginx<br/>后端：Django 2.0、Mysql 8.0、Redis<br/>前端：bootstrap 3.7.2"
                                               data-title="使用技术">点此查看</a>
                                        </td>
                                        <td width="30%">
                                            服务器：
                                            <a href="//www.aliyun.com/acts/product-section-2019/new-users?spm=5176.11533457.1089570.1.995677e37pgqUK&userCode=noarzf1b"
                                               target="_blank" rel="nofollow">阿里云服务器</a>
                                        <td width="30%">
                                            投稿方式：
                                            <a href="Mailto:1300230407@qq.com"><img
                                                    src="//rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_21.png"></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="rr_center">本站还在建设中，如遇到不合理的地方请见谅；如遇到bug、异常请反馈给我，感谢您的支持！
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--<p class="buttons_p">
                                    <a class="buttons" href="/links/list.html">优秀个人博客</a>
                                </p>-->
                            </ul>
                        </div>
                    </div>
                    <!-- comment start -->
                    <div class="comment-area panel panel-default" style="background-color: #FFF;">
                        <div class="panel-body" style="margin: 1rem;">
                            <div class="comment-area-title">
                                <span><i class="fa fa-comments"></i>&nbsp;发表评论</span>
                                <span class="jubao">
                                    <small><i class="fa fa-bullhorn"></i>&nbsp;请文明留言</small>
                                </span>
                            </div>
                            <form id="comment_form" method="POST" style="overflow:hidden">
                                {% comment %}<label class="nickname">{{ user.get_nickname_or_username }}，欢迎评论~</label>{% endcomment %}
                                <div id="reply_content_container" style="display:none;">
                                    <p id="reply_title">回复：</p>
                                    <div id="reply_content"></div>
                                </div>
                                {% csrf_token %}
                                {% get_comment_form blog as comment_form %}
                                {% for field in comment_form %}
                                    {{ field }}
                                {% endfor %}
                                <span id="comment_error" class="text-danger pull-left"></span>
                                <input type="submit" value="发表" class="btn btn-primary pull-right">
                            </form>
                            <div class="list_t_n" id="comment_point">共 <span class="c_t_n" id="comment_total_num">{% get_comment_count blog %}</span> 条评论</div>
                            <div id="comment_list">
                                {% get_comment_list blog as comments %}
                                {% for comment in comments %}
                                    <div id="root_{{ comment.pk }}" class="comment trunk">
                                        <span class="nickname">{{ comment.user.get_nickname_or_username }}</span>
                                        <span>（{{ comment.comment_time|date:"Y-m-d H:i:s" }}）：</span>
                                        <div class="tie-bdy" id="comment_{{ comment.pk }}">
                                            <div class="tie-cnt">
                                                <p>{{ comment.text|safe }}</p>
                                            </div>
                                        </div>
                                            <a class="reply_button pull-right" href="javascript:reply({{ comment.pk }});">回复</a>

                                        {% for reply in comment.root_comment.all %}
                                            <div class="reply trunk">
                                                <span class="nickname">{{ reply.user.get_nickname_or_username }}</span>
                                                <span>（{{ reply.comment_time|date:"Y-m-d H:i:s" }}）</span>
                                                <span>回复</span>
                                                <span class="nickname">{{ reply.reply_to.get_nickname_or_username }}：</span>
                                                <div class="tie-bdy" id="comment_{{ reply.pk }}">
                                                    <div class="tie-cnt">
                                                        <p>{{ reply.text|safe }}</p>
                                                    </div>
                                                </div>
                                                <a class="reply_button pull-right" href="javascript:reply({{ reply.pk }});">回复</a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% empty %}
                                    <h2 class="comment-text-center-new"><i class="fa fa-frown-o"></i>&nbsp;还没有评论，来说两句吧...</h2>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!-- about -->
                    <div class="panel panel-default">
                        <div class="panel-body sidebar">
                            <div class="about">
                              <p class="avatar"><img src="{% static 'images/author.jpg' %}" alt=""></p>
                              <p class="abname">小涛</p>
                              <p class="abposition">Web开发&nbsp;程序猿</p>
                              <p class="abtext">
                                  申请友链或其他问题请联系我<br/>
                                  联系方式：x9128168@gmail.com<br/>
                                  QQ交流群：
                                  <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=4eec807e59ec35a5612b13cdb1da69d951bc288018eddcc6db9a2d0dbad76adb">
                                      935381895</a>
                              </p>
                              <p class="js_time"></p>
                            </div>
                        </div>
                    </div>
                    <!-- hot article -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-book"></i>&nbsp;热门文章</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                {% for hot_blog in hot_blogs_for_7_days %}
                                    <li class="list-group-item hot-blogs">
                                        <span class="rank rank{{ forloop.counter }}">{{ forloop.counter }}</span>
                                        <a href="{% url 'blog_detail' hot_blog.id %}" title="{{ hot_blog.title }}">
                                            {{ hot_blog.title }}
                                        </a>
                                    </li>
                                {% empty %}
                                    <li class="list-group-item">暂时没有热门文章</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- hot tag -->
                    <div class="panel panel-default cloud">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-tags"></i>&nbsp;热门标签</span>
                        </div>
                        <div class="panel-body">
                            <ul class="tag">
                                {% for blog_tag in blog_tags %}
                                    <a href="{% url 'blogs_with_tag' blog_tag.pk %}">
                                        {{ blog_tag.tag_name }} ({{ blog_tag.blog_count }})
                                    </a>
                                {% empty %}
                                    <li>暂无热门标签</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- links -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-link"></i>&nbsp;友情链接</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled shiplink">
                                {% for links in links_list %}
                                    <li>
                                        <a href="{{ links.link_href }}" titile="{{ links.link_name }}" target="_blank">
                                        {{ links.link_name }}</a>
                                    </li>
                                    {% empty %}
                                    <li>暂无友链</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script_extends %}
    <script type="text/javascript">
        $("#staticBtn").click(function () {
           $(this).popover('show');
        });
        String.prototype.format = function(){
            var str = this;
            for (var i = 0; i < arguments.length; i++) {
                var str = str.replace(new RegExp('\\{' + i + '\\}', 'g'), arguments[i])
            };
            return str;
        }
        function reply(reply_comment_id){
            // 设置值
            $('#reply_comment_id').val(reply_comment_id);
            var html = $("#comment_" + reply_comment_id).html();
            $('#reply_content').html(html);
            $('#reply_content_container').show();

            $('html').animate({scrollTop: $('#comment_form').offset().top - 60}, 300, function(){
                CKEDITOR.instances['id_text'].focus();
            });
        }
        function numFormat(num){
            return ('00' + num).substr(-2);
        }
        function timeFormat(timestamp){
            var datetime = new Date(timestamp * 1000);
            var year = datetime.getFullYear();
            var month = numFormat(datetime.getMonth() + 1);
            var day = numFormat(datetime.getDate());
            var hour = numFormat(datetime.getHours());
            var minute = numFormat(datetime.getMinutes());
            var second = numFormat(datetime.getSeconds());
            return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }
        $("#comment_form").submit(function(){
            // 判断是否为空
            $("#comment_error").text('');
            if($("#id_text").val().trim()==''){
                $("#comment_error").text('评论内容不能为空');
                return false;
            }

            // 异步提交
            $.ajax({
                url: "{% url 'update_comment' %}",
                type: 'POST',
                data: $(this).serialize(),
                cache: false,
                success: function(data){
                    if(data['status']=="SUCCESS"){
                        if($('#reply_comment_id').val()=='0'){
                            // 插入评论
                            var comment_html = '<div id="root_{0}" class="comment trunk">' +
                                '<span class="nickname">{1}</span>' +
                                '<span>（{2}）：</span>' +
                                '<div class="tie-bdy" id="comment_{0}">' +
                                    '<div class="tie-cnt">' +
                                        '<p>{3}</p>' +
                                    '</div>' +
                                '</div>' +
                                '<a class="reply_button pull-right" href="javascript:reply({0});">回复</a>' +
                                '</div>';
                            comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);
                            $("#comment_list").prepend(comment_html);
                        }else{
                            // 插入回复
                            var reply_html = '<div class="reply trunk">' +
                                        '<span class="nickname">{1}</span>' +
                                        '<span>（{2}）</span>' +
                                        '<span>回复</span>' +
                                        '<span class="nickname">{3}：</span>' +
                                        '<div class="tie-bdy" id="comment_{0}">' +
                                            '<div class="tie-cnt">' +
                                                '<p>{4}</p>' +
                                            '</div>' +
                                        '</div>' +
                                        '<a class="reply_button pull-right" href="javascript:reply({0});">回复</a>' +
                                    '</div>';
                            reply_html = reply_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['reply_to'], data['text'], data['content_type']);
                            $("#root_" + data['root_pk']).append(reply_html);
                        }
                        // 清空编辑框的内容
                        $("#id_text").val("");
                        $('#reply_content_container').hide();
                        $('#reply_comment_id').val('0');
                        $('#no_comment').remove();
                        $("#comment_error").text('评论成功');
                    }else{
                        // 显示错误信息
                        $("#comment_error").text(data['message']);
                    }
                },
                error: function(xhr){
                    console.log(xhr);
                }
            });
            return false;
        });
        {% comment %}function likeChange(obj, content_type, object_id){
            var is_like = obj.getElementsByClassName('active').length == 0
            $.ajax({
                url: "{% url 'like_change' %}",
                type: 'GET',
                data: {
                    content_type: content_type,
                    object_id: object_id,
                    is_like: is_like
                },
                cache: false,
                success: function(data){
                    console.log(data)
                    if(data['status']=='SUCCESS'){
                        // 更新点赞状态
                        var element = $(obj.getElementsByClassName('glyphicon'));
                        if(is_like){
                            element.addClass('active');
                        }else{
                            element.removeClass('active');
                        }
                        // 更新点赞数量
                        var liked_num = $(obj.getElementsByClassName('liked-num'));
                        liked_num.text(data['liked_num']);
                    }else{
                        if(data['code']==400){
                            $('#login_modal').modal('show');
                        }else{
                            alert(data['message']);
                        }
                    }
                },
                error: function(xhr){
                    console.log(xhr)
                }
            });
        }{% endcomment %}
    </script>
{% endblock %}
